<template>
	<div>
		<div class='topContent'>
			<div class="topsnamne">筛选列表</div>
			<div class="topsicons">
				<uniIcons type="closeempty" size="20" @click="toclose"></uniIcons>
			</div>

		</div>
		<view class="page">
			<scroll-view scroll-y class="left" scroll-with-animation>
				<view v-for="(item, i) in lefts" :key="item.id" :id="'left_' + item.id" class="item"
					:class="{ in: ('left_'+item.id )=== current }" @click="leftChange(item.id,item.type)">
					<view class="left_status" v-if="item.choose"></view>
					{{ item.label }}
				</view>
			</scroll-view>

			<scroll-view scroll-y class="right" scroll-with-animation :scroll-into-view="rightIntoView" id="right-main"
				@scroll="rightScroll" @touchstart="rightTouchstart">
				<view v-for="(item,i) in rights" :key="item.id" :id="'right_' + item.id+'_'+item.type" class="item"
					:class="{ in: item.id === current ,'isLast':i == isLast}">
					<view class="right-box">
						<view class="right-titles">
							{{ item.label }}
						</view>
						<view class="right-contents">
							<view :class="{ 'right-contents-item': true, in: a.isChoose }"
								v-for="(a, b) in item.children" :key="b" @click='toClick(a, item.id)'>
								<text v-if="item.label=='变电站'"> {{ a.station }}</text>
								<text v-else> {{ a.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="right-button">
				<view class="btn failBtn" @click="toSub('fail')"> 重置 </view>

				<view class="btn successBtn" @click="toSub('success')"> 确认选择 </view>
			</view>
		</view>
	</div>

</template>

<script>
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		findDictionary,
		findStation
	} from '@/utils/http'
	import props from "../../../uni_modules/wu-calendar/components/wu-calendar/props";

	export default {
		components: {
			uniIcons
		},
		props: {
			left: {
				type: Array,

			},
			right: {
				type: Array,

			}
		},

		data() {

			return {
				current: 'left_0',
				rightIntoView: "",
				leftNum: null,
				rights: [],
				lefts: [],
				isLast: null,
				arr: []
			};
		},



		mounted() {
			console.log(this.right, 'rithgtr')
			this.rights = JSON.parse(JSON.stringify(this.right))
			this.lefts = JSON.parse(JSON.stringify(this.left))
			// console.log(this.lefts, 'keyia', this.lefts[0].children[0].name)
			// if (uni.getStorageSync('station')) {

			// } else {
			// 	if (uni.getStorageSync('userInfo').role != "admin") {
			// 		// this.lefts[0].choose = false
			// 		this.rights[0].children.forEach((item) => {
			// 			item.isChoose = false
			// 		})
			// 		findStation({
			// 			org: [this.lefts[0].children[0].name]
			// 		}).then((res) => {
			// 			this.rights[1].children = res.result
			// 			this.rights[1].children.forEach((item, index) => {
			// 				item.isChoose = false
			// 				item.code = "STATION"
			// 				item.id = index
			// 			})
			// 		})
			// 	}
			// }

			this.isLast = this.lefts.length - 1
			setTimeout(() => {
				this.elememtDataInit();
			}, 300)
		},


		methods: {
			toclose() {
				this.$parent.$parent.isShow = false
			},
			toSub(type) {
				if (type == 'success') {
					this.$parent.$parent.getQuery(this.rights, 'zyfl')
					this.$parent.$parent.isShow = false
				} else {
					this.$nextTick(() => {
						this.lefts.forEach((item, i) => {
							item.choose = false;
							this.rights[i].isChoose = false;
							this.rights[i].children.forEach(a => {
								a.isChoose = false
							})
							if (i == 1) {
								uni.setStorageSync('station', this.rights[1].children);
							}
							// console.log(this.rights)
						})
					})
					this.$parent.$parent.form.org = []
					this.$parent.$parent.form.status = []
					this.$parent.$parent.form.station = []
					this.$parent.$parent.form.voltage = []
					this.$parent.$parent.form.level = []
					this.$parent.$parent.form.deviceType = []
					this.$parent.$parent.reset()
					this.$parent.$parent.getList()
					this.$parent.$parent.isShow = false
				}
			},
			// 二级点击
			toClick(val, id) {
				this.$nextTick(() => {
					this.rights.forEach((item, i) => {
						if (item.type == val.code) {
							item.children.forEach(a => {
								if (val.code == 'ORG' && uni.getStorageSync('userInfo').role !=
									"admin") {
									return
								} else {
									// if (uni.getStorageSync('userInfo').role == "admin" && val
									// 	.code == 'STATION') {
									// 	if (a.station == val.station) {
									// 		a.isChoose = !a.isChoose
									// 		this.$forceUpdate()
									// 	}
									// } else {
									if (a.id == val.id) {
										a.isChoose = !a.isChoose
										this.$forceUpdate()
									}
								}
							})
							if (val.code == "STATION") {
								uni.setStorageSync('station', item.children);
							}
						}
						if (this.lefts[i].children && this.lefts[i].children.length > 0) {
							this.lefts[i].choose = this.lefts[i].children.some(a => {
								return a.isChoose == true
							})
						}
					})
					if (val.code == 'ORG' && uni.getStorageSync('userInfo').role == "admin") {
						if (val.isChoose) {
							this.arr.push(val.name)
						} else {
							this.arr = this.arr.filter(item => item !== val.name)
						}
						// console.log(this.arr, '888')
						findStation({
							org: this.arr
						}).then((res) => {
							if (this.arr.length == 0) {
								this.rights[1].children = []
							} else {
								this.rights[1].children = res.result
								this.rights[1].children.forEach((item, index) => {
									item.isChoose = false
									item.code = "STATION"
									item.id = index
								})
							}
						})
					}
				})
				// console.log(this.rights, val)
			},
			leftChange(id, type) {
				this.current = `left_${id}`;
				this.rightIntoView = `right_${id}_${type}`;
				this._handelScroll = false;
			},
			rightTouchstart() {
				this._handelScroll = true;
				this.rightIntoView = "";
			},
			rightScroll(e) {
				if (!this._handelScroll) return
				// if(!this._topValues?.length) return
				const {
					scrollTop
				} = e.detail;
				var s = parseInt(scrollTop)
				console.log(s, 's')
				if (
					// 0 < s && s < 327
					0 < s && s < 97
				) {
					this.current = `left_0`
				} else if (
					// s > 327 && s <= 695
					s > 97 && s <= 472
				) {
					this.current = `left_1`
				} else if (
					// s > 695 && s < 860
					s > 472 && s < 725
				) {
					this.current = `left_2`

				} else if (
					// s > 860
					s > 725 && s <= 799
				) {
					this.current = `left_3`

				} else if (
					// s > 860
					s > 725 && s <= 885
				) {
					this.current = `left_4`

				} else if (
					// s > 860
					s > 885
				) {
					this.current = `left_5`

				}
				console.log(this.current)
			},

			async elememtDataInit() {
				const {
					screenHeight
				} = uni.getSystemInfoSync();
				this._screenHeight = screenHeight;
				// 左边item高度
				this.getElementInfo(`#left_${this.left[0].id}`).then((info) => {
					this._leftItemHeight = info.height;
				});

				// 右边item距顶部的高度
				const topValues = [];
				for (let i = 0; i < this.right.length; i++) {
					const info = await this.getElementInfo(`#right_${this.right[i].id}_${this.right[i].type}`);
					topValues.push(parseInt(info.height));
					console.log(topValues, 'topValues')
					this.leftNum = topValues.length - 1;
				}

				this._topValues = topValues;

			},

			// 获取元素信息
			getElementInfo(selector) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select(selector)
						.boundingClientRect((data) => {
							resolve(data);
						})
						.exec();
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.page {
		display: flex;
		height: 70vh;

		.left {
			position: relative;
			top: 0;
		}

		.right {
			background: white;

		}

		.left,
		.right {
			/* #ifdef H5 */
			height: calc(100vh - 44px);
			/* #endif */

			/* #ifndef H5 */
			// height: 100vh;
			/* #endif */
		}



		.left {
			width: 200rpx;
			background: #f3f3f3;
			text-align: center;


			.item {
				width: 200rpx;
				padding: 30rpx;
				align-items: center;
				font-style: normal;
				font-weight: 400;
				background: #f3f3f3;
				transition: all 0.3s ease;
				position: relative;
				font-size: 28rpx;

				.left_status {
					width: 8rpx;
					height: 8rpx;
					background: #20BF65;
					border-radius: 50%;
					top: 50%;
					position: absolute;
					left: 20rpx;
				}

				&.in {
					position: relative;

					&::before {
						content: "";
						position: absolute;
						width: 28rpx;
						height: 6rpx;
						background: #2854EB;
						top: 50%;
						left: -10rpx;
						transform: translateY(-50%) rotate(-90deg);
					}





					&::before {
						content: "";
						position: absolute;
					}

					color: #2854EB;

					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 600;
					background: #fff;
					transition: all 0.3s ease;
				}
			}
		}

		.right {
			flex: 1;

			.item {
				padding: 30rpx;


			}
		}

		.right-button {
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			right: 0rpx;
			background: white;
			height: 140rpx;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;

			.failBtn {
				width: 300rpx;
				text-align: center;

				height: 80rpx;
				background: #5C7FF5;
				box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				line-height: 80rpx;

				font-size: 36rpx;
				color: #FFFFFF;
			}

			.successBtn {
				width: 300rpx;
				text-align: center;

				height: 80rpx;
				line-height: 80rpx;
				background: #5C7FF5;
				box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		.right-titles {
			text-align: left;
			position: relative;




		}

		.right-contents {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
		}

		.right-contents-item.in {

			max-width: 220rpx !important;
			background: #5C7FF5 !important;
			border: 1rpx solid #5C7FF5;

			.right-content-img-box {
				border-radius: 22rpx;

				border-radius: 10rpx 10rpx 10rpx 10rpx;

			}

			text {
				color: white;
			}
		}

		.right-contents-item {
			margin-right: 20rpx;
			padding: 10rpx;
			margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 1rpx solid #707070;
			// width: 33%;
			max-width: 220rpx;
			text-align: left;
			display: flex;

			flex-direction: column;
			justify-content: center;
			align-items: center;



			text {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
			}

		}

	}

	.topsnamne {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		font-size: 30rpx;
		color: #272727;
	}

	.topContent {
		position: relative;
		background: #F5F6F8;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		padding: 28rpx 0;
		text-align: center;
	}

	.topsicons {
		position: absolute;
		right: 25rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
<style scoped>
	.right .isLast {
		/* padding-bottom:700rpx; */
		height: 2000rpx;
	}
</style>